<script setup>
import { onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useThemeStore } from '@store/theme';
import Card from './components/Common/Card.vue';
import Switch from './components/Switch.vue';
import SvgFilters from './components/SvgFilters.vue';

const route = useRoute();
const router = useRouter();
const themeStore = useThemeStore();

// 主题选项
const themeOptions = [
  { value: 'light', label: '浅色', icon: '☀️' },
  { value: 'dark', label: '深色', icon: '🌙' }
];

// 设置页面标题
onMounted(() => {
  document.title = 'Vue 3 技术特性展示';
  // 初始化主题
  themeStore.initTheme();
});

// 返回首页的方法
const goHome = () => {
  router.push('/');
};

// 切换主题
const switchTheme = (theme) => {
  themeStore.setAppTheme(theme);
};

// 当前选中的主题
const currentTheme = computed(() => themeStore.appTheme);

// 用于Switch组件的响应式属性
const isDarkTheme = computed({
  get: () => currentTheme.value === 'dark',
  set: (value) => {
    // 捕获点击位置并触发动画
    const switchElement = document.querySelector('.switch-track');
    if (switchElement) {
      const rect = switchElement.getBoundingClientRect();
      const x = rect.left + rect.width / 2;
      const y = rect.top + rect.height / 2;
      
      const container = document.querySelector('.app-container');
      if (container) {
        // 设置扩散效果的起始位置和颜色
        container.style.setProperty('--diffuse-x', `${x}px`);
        container.style.setProperty('--diffuse-y', `${y}px`);
        container.style.setProperty('--diffuse-color', value ? 'rgba(26, 26, 46, 0.8)' : 'rgba(245, 245, 247, 0.8)');
        
        // 添加动画类
        container.classList.add('theme-transition');
        
        // 动画结束后移除类
        setTimeout(() => {
          container.classList.remove('theme-transition');
        }, 800);
      }
    }
    
    // 执行主题切换
    switchTheme(value ? 'dark' : 'light');
  }
});

// 处理主题切换
const handleThemeToggle = (value) => {
  // 触发setter
  isDarkTheme.value = value;
};
</script>

<template>
    <div class="app-container" :data-theme="currentTheme">
    
      <header class="app-header glass-effect">
        <div class="header-content">
          <button 
            v-if="route.path !== '/'" 
            @click="goHome"
            title="返回首页"
            class="back-button"
          >
            ←
          </button>
          <div class="title-container centered-card-container">
            <Card type="primary" shadow class="title-card">
              <h1>
                <router-link to="/">Vue 3 技术特性展示</router-link>
              </h1>
              <p>现代化响应式应用架构</p>
            </Card>
          </div>
          <!-- 主题切换按钮 - 使用Switch组件 -->
            <div class="theme-switcher-wrapper">
              <SvgFilters />
              <Switch 
        v-model="isDarkTheme"
        :active-color="'#4CD964'"
        :size="'medium'"
        @toggle="handleThemeToggle"
        :active-icon="'☀️'"
        :inactive-icon="'🌙'"
      />
            </div>
        </div>
      </header>

    <!-- 路由视图 -->
    <main class="app-main">
      <transition name="theme-fade" mode="out-in">
        <router-view v-slot="{ Component }">
          <suspense>
            <component :is="Component" />
            <template #fallback>
              <div class="loading-placeholder">加载中...</div>
            </template>
          </suspense>
        </router-view>
      </transition>
    </main>

    <!-- 底部 -->
      <footer class="app-footer glass-effect">
        <p>使用 Vue 3 + Vite + Pinia + Vue Router 构建的现代化应用</p>
      </footer>
  </div>
  
</template>

<style scoped>
/* 颜色变量 - 使用Apple设计系统颜色 */
:root {
  --primary-gradient: linear-gradient(to right, var(--apple-blue, #3B82F6), #3B82F6);
  --primary-gradient-hover: linear-gradient(to right, #0051B8, #2563EB);
  --text-secondary: #6b7280;
  --transition-duration: 0.25s;
  --apple-transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 主题切换动画 - 从点到面的扩散效果 */
.app-container {
  transition: background-color 0.6s ease, color 0.6s ease;
  position: relative;
  overflow: hidden;
}

/* 添加主题切换时的扩散圆圈效果 */
.app-container::before {
  content: '';
  position: fixed;
  top: var(--diffuse-y, 50%);
  left: var(--diffuse-x, 50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--diffuse-color, transparent);
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
}

.app-container.theme-transition::before {
  animation: theme-diffuse 0.8s ease-out;
}

@keyframes theme-diffuse {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  100% {
    width: 200vw;
    height: 200vh;
    opacity: 0;
  }
}

/* 路由过渡动画 */
.theme-fade-enter-active,
.theme-fade-leave-active {
  transition: opacity 0.3s ease;
}

.theme-fade-enter-from,
.theme-fade-leave-to {
  opacity: 0;
}

/* 深色主题样式 */
.app-container[data-theme="dark"] {
  background-color: #1a1a2e;
  color: #f0f0f0;
}

/* 深色模式下的标题、段落和按钮样式 */
.app-container[data-theme="dark"] h1,
.app-container[data-theme="dark"] h2,
.app-container[data-theme="dark"] h3,
.app-container[data-theme="dark"] h4,
.app-container[data-theme="dark"] h5,
.app-container[data-theme="dark"] h6,
.app-container[data-theme="dark"] p,
.app-container[data-theme="dark"] button {
  color: #ffffff;
}

/* 深色模式下的链接样式 */
.app-container[data-theme="dark"] a {
  color: #a0cfff;
}

/* 浅色主题样式 */
.app-container[data-theme="light"] {
  background-color: #f5f5f7;
  color: #333;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--transition-duration) ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 全局布局样式 */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Apple风格的背景 - 浅色模式使用微妙的渐变 */
  background: linear-gradient(to bottom, #f5f5f7, #ffffff);
}

/* 深色主题背景 - Apple暗色模式标准 */
[data-theme="dark"] .app-container {
  background: linear-gradient(to bottom, #0c0c0c, #121212);
}

/* 头部样式优化 */
.app-header {
   position: sticky;
   top: 0;
   z-index: 50;
   /* Apple标准的圆角 */
   border-radius: 16px;
   margin: 0.75rem;
}

/* 玻璃拟态效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 深色模式下的玻璃效果 */
[data-theme="dark"] .glass-effect {
  background: rgba(31, 41, 55, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.app-header .header-content {
  max-width: 7xl;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-header .back-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background-image: var(--primary-gradient);
  color: white;
  /* 微妙的阴影 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: var(--apple-transition);
}

.app-header .back-button:hover {
  transform: scale(1.05);
  background-image: var(--primary-gradient-hover);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* 点击效果 */
.app-header .back-button:active {
  transform: scale(0.98);
}

.app-header .title-container {
  flex: 1;
}

.app-header .centered-card-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.app-header .title-card {
  margin-bottom: 0;
  padding: 1.5rem 2rem;
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.app-header .title-card h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.app-header .title-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-secondary);
}

.app-header .title-container h1 a {
  display: inline-block;
  transition: transform var(--transition-duration) ease;
  color: #000000; /* 浅色主题下设置为黑色 */
}

/* 深色主题下仍然使用渐变效果 */
[data-theme="dark"] .app-header .title-container h1 a {
  background-image: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-header .title-container h1 a:hover {
  transform: scale(1.05);
}

.app-header .title-container p {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--text-secondary);
}

/* 主要内容区域样式 */
.app-main {
  flex: 1;
  max-width: 7xl;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1rem 2rem 2rem;
}

.app-main .loading-placeholder {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: var(--text-secondary);
}

/* 底部样式 */
.app-footer {
  /* 移除自定义玻璃效果，由LiquidGlass组件处理 */
  margin-top: auto;
  padding: 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  border-radius: 12px;
  margin: 1rem;
  max-width: calc(7xl - 2rem);
}

.app-footer p {
  margin: 0;
}

/* 主题切换按钮样式 */
.theme-switcher-wrapper {
  position: relative;
  display: inline-block;
  margin: 0.5rem 0;
}

/* 主题切换滑动开关样式 */
.theme-toggle {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  position: relative;
  margin: 0.25rem 0;
}

/* 轨道样式 - 药丸形状 */
.toggle-track {
  position: relative;
  width: 72px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  filter: url(#liquidGlass);
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 深色主题下的轨道样式 */
.toggle-track.active-dark {
  background: rgba(40, 40, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 滑块样式 */
.toggle-slider {
  position: absolute;
  left: 2px;
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: url(#liquidGlass);
  /* 使用内边距替代top定位，确保垂直居中 */
  margin: 2px 0;
}

/* 滑块滑动到深色位置 */
.toggle-slider.slid-dark {
  transform: translateX(32px);
  background: #2a2a2a;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
  /* 保持与默认状态相同的垂直居中 */
  margin: 2px 0;
}

/* 图标样式 */
.toggle-icon {
  font-size: 1.2rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* 悬停效果 */
.theme-toggle:hover .toggle-track {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.theme-toggle:hover .toggle-track.active-dark {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* 点击效果 */
.theme-toggle:active .toggle-slider {
  transform: scale(0.95) translateX(0);
  margin: 2px 0;
}

.theme-toggle:active .toggle-slider.slid-dark {
  transform: scale(0.95) translateX(32px);
  margin: 2px 0;
}

/* 深色主题支持 - 符合Apple暗色模式规范 */
[data-theme="dark"] {
  color-scheme: dark;
  
  /* Apple暗色模式标准颜色变量 */
  --color-background: #000000;
  --color-surface: #1c1c1e;
  --color-text-primary: #ffffff;
  --color-text-secondary: #8e8e93;
  --color-border: #38383a;
  
  /* 深色模式下的玻璃效果 */
  --glass-bg: rgba(30, 30, 30, 0.7);
}

/* Apple标准滚动条样式 */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 深色模式应用到应用容器 */
[data-theme="dark"] .app-container {
  color: var(--color-text-primary);
}

/* 深色模式标题样式更新 */
[data-theme="dark"] .title-container p {
  color: var(--color-text-secondary);
}

/* 深色模式按钮样式更新 - Apple风格 */
[data-theme="dark"] .back-button {
  background-image: linear-gradient(to right, #0066CC, #3B82F6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .back-button:hover {
  background-image: linear-gradient(to right, #0051B8, #2563EB);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* 深色模式标题链接样式更新 */
[data-theme="dark"] .title-container h1 a {
  background-image: none;
  color: #ffffff;
}

[data-theme="dark"] .title-container h1 a:hover {
    transform: scale(1.03);
  }

  /* 深色模式样式 - 移除自定义玻璃效果，由LiquidGlass组件处理 */
</style>
